<!doctype html>
<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
	<meta charset="UTF-8">
	<title>Grima Portal</title>
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/themes/bootstrap/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/icon.css">
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/portal.css">
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/font-awesome.min.css">
	
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.easyui.min.js"></script>
</head>

<body class="easyui-layout">
	
    <div data-options="region:'north',border:false" style="height:50px;padding:10px;overflow: hidden;">
		<jsp:include page="../header.jsp" />
	</div>
    <div data-options="region:'east',split:true,collapsed:true,title:' '" style="width:250px;padding:10px;"></div>
	<div data-options="region:'south',border:false" style="height:30px;padding:10px;background:#F5F5F5;text-align:center;color:#707070">
		<jsp:include page="../footer.jsp" />
	</div>
    <div data-options="region:'center',title:'Grupos'">
    
    <c:if test="${not empty groups}">
		<table id="dg" class="easyui-datagrid" title=""
				data-options="rownumbers:true,singleSelect:true,method:'get',toolbar:'#tb',fitColumns:true,onClickRow: onClickRow">
			<thead>
				<tr>
					<th data-options="field:'id',width:50">Id</th>
					<th data-options="field:'name',width:80">Nome</th>
					<th data-options="field:'description',width:80">Descrição</th>
					<th data-options="field:'type',width:80">Tipo</th>
				</tr>
			</thead>
            <c:forEach items="${groups}" var="group">
                <tr>
                    <td>${group.id}</td>                    
                    <td>${group.name}</td>
                    <td>${group.description}</td>
                    <td>${group.type}</td>
                </tr>
            </c:forEach>
        </table>
		<div class="easyui-pagination" style="border:1px solid #ccc;" data-options="
				total: ${count},
				pageNumber: ${page.pageNumber},
				pageSize: ${page.pageSize},
				onSelectPage: function(pageNumber, pageSize){
				changePage(pageNumber, pageSize);
			}">
		</div>
    </c:if>
    <c:if test="${empty groups}">
    	Não há grupos cadastrados.
    </c:if>
	<div id="tb" style="padding:5px;height:auto">
		<div style="margin-bottom:5px">
			<a href="<%=request.getContextPath()%>/secure/admin/addGroup.html" title="Novo" ><i class="fa fa-plus" style="font-size:18px;color:green;padding:5px;"></i>Novo</a>
			<a href="#" onclick="details();" title="Detalhes"><i class="fa fa-list" style="font-size:18px;color:green;padding:5px;"></i>Detalhes</a>
			<a href="#" onclick="edit();" title="Editar"><i class="fa fa-edit" style="font-size:18px;color:green;padding:5px;"></i>Editar</a>
			<a href="#" onclick="confirmDelete();" title="Excluir"><i class="fa fa-trash-o" style="font-size:18px;color:green;padding:5px;"></i>Excluir</a>
		</div>
		<br/>
		<div>
			Nome: <input id="name" class="easyui-textbox" style="width:120px" value="${name}"/>
			Descrição: <input id="description" class="easyui-textbox" style="width:120px" value="${description}"/>
			Tipo: <input id="type" class="easyui-textbox" style="width:120px" value="${type}" />
			<a href="#" onclick="searchGroup();" class="easyui-linkbutton" iconCls="icon-search">Procurar</a>
		</div>
	</div>
    </div>

	<input type="hidden" id="selectedItemId"/>

	<script>
		function searchGroup(){
			var name = $('#name').val();
			var description = $('#description').val();
			var type = $('#type').val();
			var	pageNumber = 1;
			var pageSize = ${page.pageSize};
			
			window.location.href = '<c:url value="/secure/admin/groups.html"/>?pageNumber='+pageNumber+'&pageSize='+pageSize+'&name='+name+'&description='+description+'&type='+type;
		}
		function onClickRow(index){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#selectedItemId').val(row.id);
			}
		}
		function details(){
			var id = $('#selectedItemId').val();
			if (id > 0){
				window.location.href = '<c:url value="/secure/admin/groupDetails.html"/>?id='+id;
			}
		}
		function edit(){
			var id = $('#selectedItemId').val();
			if (id > 0){
				window.location.href = '<c:url value="/secure/admin/groupEdit.html"/>?id='+id;
			}
		}
		function confirmDelete(){
			var id = $('#selectedItemId').val();
			if (id > 0) {
				$.messager.confirm('Aviso', 'Confirma exclusão?', function(r){
					if (r){
						window.location.href = '<c:url value="/secure/admin/groupDelete.html"/>?id='+id;
					}
				});
			}
		}
		function changePage(pageNumber, pageSize){
			var name = $('#firstName').val();
			var description = $('#lastName').val();
			var type = $('#type').val();

			window.location.href = '<c:url value="/secure/admin/groups.html"/>?pageNumber='+pageNumber+'&pageSize='+pageSize+'&name='+name+'&description='+description+'&type='+type;
		}
	</script>

</body>
</html>